<template>
  <Card>
    <template #title>
      <h4>站点底部公安备案信息设置</h4>
    </template>
    <i-form :model="state.GaBAConfig"
            :label-width="100"
            style="width:60%"
            label-position="left">
      <FormItem label="公安备案logo" prop="img_path">
        <Image
            v-if="state.imgShow"
            :src="state.gaImgSrc[0]"
            fit="cover"
            width="10%"
            height="10%"
            preview
            :lazy="true"
            @on-error="captureImgShowError"
            :preview-list="state.gaImgSrc"
            :toolbar="['zoomIn', 'zoomOut', 'original', 'rotateLeft', 'rotateRight']">
        </Image>
        <Image v-if="!state.imgShow" width="10%"
               height="1%">
          <template #error>
            <Icon type="ios-image-outline" size="40" color="#ccc"/>
          </template>
        </Image>
        <Input v-model="state.GaBAConfig.img_path" style="margin-top: 10px"/>
      </FormItem>
      <FormItem label="显示名称" prop="key">
        <Input v-model="state.GaBAConfig.key" placeholder="请输入名称" clearable/>
      </FormItem>
      <FormItem label="跳转链接" prop="value">
        <Input v-model="state.GaBAConfig.value" placeholder="请输入链接，例如:http://www.beian.gov.cn" clearable/>
        <span style="color: #afafaf">跳转链接不设置,则不跳转</span>
      </FormItem>
      <Button type="primary" @click="modifyGaBAConfig" v-preventReClick v-perms="['config/modify_gaba_config']">提交</Button>
    </i-form>
  </Card>
</template>

<script setup>
import {getCurrentInstance, inject, onMounted, onUpdated, reactive, ref, watch} from "vue";
import config from '@/config/global.config';
import {SettingsService} from "@/api/settings";

const reload = inject('reload');

const {proxy} = getCurrentInstance();

const imgRef = ref(null);

const state = reactive({
  GaBAConfig: {
    id: '',
    key: '',
    value: '',
    img_path: ''
  },
  gaImgSrc: [],
  imgShow: false
})

/**
 * 补货图片显示异常
 */
const captureImgShowError = () => {
  state.imgShow = false;
}

/**
 * 监听图片路径变化
 */
watch(() => state.GaBAConfig.img_path, (newValue, oldValue) => {
  state.gaImgSrc[0] = `${config.backImgSrc + newValue}`
  state.imgShow = true;
}, {immediate: true})

const modifyGaBAConfig = async () => {
  const param = {
    id: state.GaBAConfig.id,
    value: JSON.stringify({
      key: state.GaBAConfig.key,
      value: state.GaBAConfig.value,
      img_path: state.GaBAConfig.img_path
    })
  }
  const {data} = await SettingsService.ModifyGaBAConfig(param);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload()
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload()
      }
    })
  }
}

onMounted(async () => {
  const {data} = await SettingsService.GetGaBAConfig();
  console.log(JSON.parse(data.value))
  Object.assign(state.GaBAConfig, JSON.parse(data.value))
  state.GaBAConfig.id = data.id
})

</script>

<style scoped>

</style>
